<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>活动宣传</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="js/skin/WdatePicker.css" />
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
	      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
		<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="js/bootstrap.min.js" type="text/javascript"></script>
		<script src="js/tendina.min.js" type="text/javascript"></script>
		<script src="js/WdatePicker.js" type="text/javascript"></script>
	</head>

	<body>
		<!--头部导航条  S:-->
		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<ul class="nav navbar-nav ">
					<div class="navbar-header mr10">
						<!--<div class="thumbnail">-->
						<img class="img-responsive" src="img/sshe1.png" alt="logo" />
						<!--</div>-->
					</div>
					<li class="active">
						<a href="">微党建</a>
					</li>
					<li>
						<a href="">微食堂</a>
					</li>
					<li>
						<a href="">微报修</a>
					</li>
					<li>
						<a href="">微乐摇</a>
					</li>
					<li>
						<a href="">微通讯</a>
					</li>
					<li>
						<a href="">微考勤</a>
					</li>
					<li>
						<a href="">微考试</a>
					</li>
					<li>
						<a href="">微会议</a>
					</li>

				</ul>
				<div class="navbar-collapse">
					<p class="navbar-text navbar-right">超级管理员: 嘻哈小C</p>
				</div>
			</div>
		</nav>
		<!--E:头部导航条-->
		<div class="col-lg-2 col-md-2 col-sm-2 p0">
			<!--菜单-->
			<div class="layout_left_menu">
				<ul id="menu">
					<li class="childUlLi">
						<a href="" target="menuFrame"><i class="glyphicon glyphicon-align-justify"></i>学习平台管理</a>
						<ul>
							<li>
								<a href="" target="menuFrame"><i class="glyphicon glyphicon-menu-right icon-chevron-right-p10"></i>文献学习</a>
								<ul>
									<li>
										<a href="#"><i class="glyph-icon icon-chevron-chevron-right-p20"></i>中央精神</a>
									</li>
									<li>
										<a href="#"><i class="glyph-icon icon-chevron-chevron-right-p20"></i>党史图书馆</a>
									</li>
									<li>
										<a href="#"><i class="glyph-icon icon-chevron-chevron-right-p20"></i>重温党课</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="" target="menuFrame"><i class="glyphicon glyphicon-menu-right icon-chevron-right-p10"></i>模范学习</a>
								<ul>
									<li>
										<a href="#"><i class="glyph-icon icon-chevron-chevron-right-p20"></i>楷模事迹</a>
									</li>
									<li>
										<a href="#"><i class="glyph-icon icon-chevron-chevron-right-p20"></i>优秀党支部介绍</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="" target="menuFrame"><i class="glyphicon glyphicon-menu-right icon-chevron-right-p10"></i>廉政学习</a>
								<ul>
									<li>
										<a href="#"><i class="glyph-icon icon-chevron-chevron-right-p20"></i>廉政学习</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="" target="menuFrame"><i class="glyphicon glyphicon-menu-right icon-chevron-right-p10"></i>知识及动态</a>
								<ul>
									<li>
										<a href="#"><i class="glyph-icon icon-chevron-chevron-right-p20"></i>党建知识库</a>
									</li>
									<li>
										<a href="#"><i class="glyph-icon icon-chevron-chevron-right-p20"></i>党建动态近期播报</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="" target="menuFrame"><i class="glyphicon glyphicon-menu-right-p10"></i>在线评测</a>
							</li>
						</ul>
					</li>
					<li class="childUlLi">
						<a href="" target="menuFrame"> <i class="glyphicon glyphicon-align-justify"></i>党建工作平台</a>
						<ul>
							<li class="childUlLi">
								<a href="#"><i class="glyphicon glyphicon-menu-right icon-chevron-right-p10"></i>工作计划</a>
								<ul>
									<li>
										<a href="#"><i class="glyph-icon icon-chevron-chevron-right-p20"></i>工作计划</a>
									</li>
									<li>
										<a href="#"><i class="glyph-icon icon-chevron-chevron-right-p20"></i>活动计划</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#"><i class="glyphicon glyphicon-menu-right-p10"></i>活动宣传</a>
							</li>
						</ul>
					</li>
					<li class="childUlLi">
						<a href="" target="menuFrame"> <i class="glyphicon glyphicon-align-justify"></i>党建交流平台</a>
						<ul>
							<li>
								<a href="#"><i class="glyphicon glyphicon-menu-right-fonts"></i>通知</a>
							</li>
							<li>
								<a href="#"><i class="glyphicon glyphicon-menu-right-fonts"></i>公告</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
			<!--菜单-->
		</div>
		<div class="col-lg-10 col-md-10 col-sm-10">
			<div class="row">
				<div class="col-lg-12">
					<div class="btn-group pull-right">
						<a data-toggle="modal" data-target=".Mylinks" class="btn btn-link" href="javascript:">设置推广链接</a>
					</div>
				</div>
			</div>
			<div class="row mb10">
				<div class="col-lg-12">
					<ul class="nav nav-tabs" id="tabs">
						<li>
							<a data-toggle="tab" href="#tab0">首页</a>
						</li>
						<li class="active">
							<a data-toggle="tab" href="#tab1">活动宣传 <span class="glyphicon glyphicon-remove"></span></a>
						</li>
						<li>
							<a data-toggle="tab" href="#tab2">先锋模范学习<span class="glyphicon glyphicon-remove"></span></a>
						</li>
						<li>
							<a data-toggle="tab" href="#tab3">党风廉政学习<span class="glyphicon glyphicon-remove"></span></a>
						</li>
						<li>
							<a data-toggle="tab" href="#tab4">党建知识及动态<span class="glyphicon glyphicon-remove"></span></a>
						</li>
						<li>
							<a data-toggle="tab" href="#tab5">在线测评<span class="glyphicon glyphicon-remove"></span></a>
						</li>
					</ul>
					<div class="tab-content">
						<div class="tab-pane" id="tab0">
							<div class="thumbnail mt20 bor0">
								<img class="img-responsive mt50" src="img/welcome.png" />
							</div>
						</div>
						<div class="tab-pane in active" id="tab1">
							<div class="row mt20">
								<div class="form-inline">
									<div class="col-md-3 col-sm-4">
										<div class="form-group">
											<p class="form-control-static">工作标题</p>
										</div>
										<div class="form-group ml10">
											<input class="form-control" type="text" />
										</div>
									</div>
									<div class="col-md-3 col-sm-4">
										<div class="form-group">
											<p class="form-control-static">审核状态</p>
										</div>
										<div class="form-group ml10">
											<select class="form-control">
												<option value="0">全部状态</option>
												<option value="1">已发布</option>
												<option value="2">一级审核(1/4)</option>
												<option value="3">二级审核(2/4)</option>
												<option value="4">三级审核(3/4)</option>
												<option value="5">四级审核(4/4)</option>
												<option value="6">草稿中</option>
												<option value="7">被驳回</option>
											</select>
										</div>
									</div>
									<div class="col-md-3 col-sm-4">
										<div class="form-group">
											<p class="form-control-static">工作期限</p>
										</div>
										<div class="form-group ml10">
											<input class="form-control" id="createStart" onClick="WdatePicker({el:'createStart'})" type="text" />
										</div>
									</div>
									<div class="col-md-3 col-sm-4">
										<div class="form-group">
											<p class="form-control-static">到</p>
										</div>
										<div class="form-group ml10">
											<input class="form-control" id="createEnd" onClick="WdatePicker({el:'createEnd'})" type="text" />
										</div>
									</div>
								</div>
							</div>
							<div class="row mt20">
								<div class="form-inline">
									<div class="col-md-3 col-sm-4">
										<div class="form-group">
											<p class="form-control-static">完成时间</p>
										</div>
										<div class="form-group ml10">
											<input class="form-control" id="releaseStart" onClick="WdatePicker({el:'releaseStart'})" type="text" />
										</div>
									</div>
									<div class="col-md-3 col-sm-4">
										<div class="form-group">
											<p class="form-control-static">到</p>
										</div>
										<div class="form-group ml10">
											<input class="form-control" id="releaseEnd" onClick="WdatePicker({el:'releaseEnd'})" type="text" />
										</div>
									</div>
									<div class="col-md-3 col-sm-4">
										<div class="form-group">
											<p class="form-control-static">上传人</p>
										</div>
										<div class="form-group ml10">
											<input class="form-control" type="text" />
										</div>
									</div>
								</div>
							</div>
							<div class="row mt20">
								<div class="btn-wrap pl10 pull-left">
									<div class="btn-group ml10">
										<button class="btn btn-primary">查询</button>
									</div>
									<div class="btn-group ml10">
										<button class="btn btn-primary">导出</button>
									</div>
									<div class="btn-group ml10">
										<button class="btn btn-primary" data-toggle="modal" data-target=".myModal">添加</button>
									</div>
								</div>
								<div class="btn-wrap mr80 pull-right">
									<div class="btn-group ml10">
										<button class="btn btn-primary" data-toggle="modal" data-target=".myExamine">设置审批层级</button>
									</div>
								</div>
							</div>
							<div class="row mt20">
								<div class="col-md-12">
									<table class="table table-bordered table-responsive datatable">
										<thead>
											<th>活动宣传标题</th>
											<th>关联活动计划</th>
											<th>状态</th>
											<th>活动时间</th>
											<th>创建时间</th>
											<th>发布时间</th>
											<th>上传人</th>
											<th>操作</th>
										</thead>
										<tbody>
											<tr>
												<td>可爱的文章标题</td>
												<td>活动计划名字1</td>
												<td>草稿中</td>
												<td>2016-8-11-2016-12-25</td>
												<td>2016-8-11 09:29:47</td>
												<td>2016-8-14 19:29:47</td>
												<td>wangxuchun</td>
												<td>
													<button class="btn btn-xs btn-info">查看</button>
													<button class="btn btn-xs btn-danger">删除</button>
													<button class="btn btn-xs btn-success">通过</button>
													<button class="btn btn-xs btn-default">驳回</button>
												</td>
											</tr>
											
										</tbody>
									</table>

									<nav>
										<ul class="pagination pull-right">
											<li class="disabled">
												<a href="javascript:"><span>&laquo;</span></a>
											</li>
											<li class="active">
												<a href="javascript:">1 <span class="sr-only">1</span></a>
											</li>
											<li>
												<a href="javascript:">2 <span class="sr-only">2</span></a>
											</li>
											<li>
												<a href="javascript:">3 <span class="sr-only">3</span></a>
											</li>
											<li>
												<a href="javascript:">...<span class="sr-only">4</span></a>
											</li>
											<li>
												<a href="javascript:">99 <span class="sr-only">99</span></a>
											</li>
											<li>
												<a href="javascript:">&raquo;
												</a>
											</li>
										</ul>
									</nav>
								</div>
							</div>
						</div>
						<div class="tab-pane" id="tab2">
							先锋模范学习
						</div>
						<div class="tab-pane" id="tab3">
							党风廉政学习
						</div>
						<div class="tab-pane" id="tab4">
							党建知识及动态
						</div>
						<div class="tab-pane" id="tab5">
							在线测评
							<input size="16" type="text" value="2012-06-15" readonly class="form_datetime">
						</div>
					</div>
				</div>
			</div>

		</div>
		<!--添加功能弹出层-->
		<div class="modal fade myModal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
		                  &times;
		            </button>
						<h4 class="modal-title" id="myModalLabel">添加活动宣传</h4>
					</div>
					<div class="modal-body ovhid">
						<div class="col-md-12">
							<div class="form-inline mt10">
								<div class="form-group">
									<p class="form-control-static">关联活动</p>
								</div>
								<div class="form-group pl10">
									<select class="form-control">
										<option value="1">活动1</option>
										<option value="2">活动2</option>
										<option value="3">活动3</option>
									</select>
								</div>
							</div>
							<div class="form-inline mt10">
								<div class="form-group">
									<p class="form-control-static">活动宣传</p>
								</div>
								<div class="form-group pl10">
									<input type="file" />
								</div>
							</div>
							<div class="form-inline mt10">
								<div class="form-group">
									<p class="form-control-static">相关图片</p>
								</div>
								<div class="form-group pl10">
									<input type="file" />
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">保存草稿</button>
						<button type="button" class="btn btn-primary">提交</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->

		</div>

		<!--设置审批层级弹出层-->
		<div class="modal fade myExamine">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
		                  &times;
		            </button>
						<h4 class="modal-title" id="myModalLabel">设置审批层级</h4>
					</div>
					<div class="modal-body">
						<label class="checkbox-inline">
						      <input type="radio" name="optionsRadiosinline" id="optionsRadios3" 
						         value="option1" checked> 无
						   </label>
						<label class="checkbox-inline">
						      <input type="radio" name="optionsRadiosinline" id="optionsRadios3" 
						         value="option1">一级审批
						   </label>
						<label class="checkbox-inline">
						      <input type="radio" name="optionsRadiosinline" id="optionsRadios3" 
						         value="option1">二级审批
						   </label>
						<label class="checkbox-inline">
						      <input type="radio" name="optionsRadiosinline" id="optionsRadios3" 
						         value="option1">三级审批
						   </label>
						<label class="checkbox-inline">
						      <input type="radio" name="optionsRadiosinline" id="optionsRadios3" 
						         value="option1">四级审批
						   </label>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary">提交</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->

		</div>

		<!--设置推广链接弹出层-->
		<div class="modal fade myLink Mylinks">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
		                  &times;
		            </button>
						<h4 class="modal-title" id="myModalLabel">设置链接推广</h4>
					</div>
					<div class="modal-body">
						<div class="form-inline">
							<div class="form-group">
								<p class="form-control-static">第三方链接地址</p>
							</div>
							<div class="form-group ml10">
								<input type="text" class="form-control w300" />
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" data-dismiss="modal">提交</button>
					</div>
				</div>
			</div>
		</div>

		<!--删除提示弹出层-->
		<div class="modal fade bs-example-modal-sm" >
			<div class="modal-dialog modal-sm">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
		                  &times;
		            </button>
						<h4 class="modal-title" id="myModalLabel">友情提示:</h4>
					</div>
					<div class="modal-body">
						是否删除该条数据
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary sureBtn" data-dismiss="modal">删除</button>
					</div>
				</div>
			</div>
		</div>
		
		<!--alert 提示框 -->
		<div class="modal fade bs-example-modal-sm-alert" >
			<div class="modal-dialog modal-sm">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
		                  &times;
		            </button>
						<h4 class="modal-title" id="myModalLabel">提示</h4>
					</div>
					<div class="modal-body">
						删除成功
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary sureBtn" data-dismiss="modal">确定</button>
					</div>
				</div>
			</div>
		</div>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//关闭tab 页
			$("#tabs li span").on("click", function() {
				$($(this).parents("a").attr("href")).remove();
				$(this).parents("li").remove();

			});


			//点击搜索按钮
			$("#search-btn").click(function() {

				$(".serch-name").show();
			})
			//判断是否存在当前typeId  0 是存在  1是不存在   不存在 则添加;存在则不添加
			var nameFlag = 1;
			//筛选元素
			$(".serch-name").find("ul").on("click", "li", function() {
				//
				var nameText = $(this).find("span.pull-left").html();
				//获取typeId
				var typeId = $(this).attr("typeId");
				//
				$("#userName").val(nameText);
				
				
				$(".wrap").find(".label").each(function(){
					//判断是否存在					
					if(typeId==$(this).attr("datatId")){
						nameFlag=0;
					}
				});
				//不存在添加
				if(nameFlag==1){
					//添加选中人员
					$(".wrap").append("<span class='label mb5 ml10 label-info fz100p' datatId='"+typeId+"'>"+nameText+"<span class='glyphicon glyphicon-remove ml10 cursor'></span></span>");
				}
				
				$(".wrap").find(".label").on("click","span",function(){
					$(this).parents("span.label").remove();
					
				});
				
				$(this).parents(".serch-name").hide();
			});
			//删除数据
			$(".datatable tr td .btn-danger").click(function(){
				
				$('.bs-example-modal-sm').modal('show');
				
//				//确定 alert 弹层
				$(".sureBtn").click(function(){
					$('.bs-example-modal-sm').modal('hide');
					$('.bs-example-modal-sm-alert').modal('show');
				})
			
			})
			
		</script>
	</body>

</html>